<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
    <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            list: [],
            inputValue: "",
          };
        },
        methods: {
          add() {
            if (!this.inputValue) {
              alert("请输入内容");
              return;
            }
            this.list.push(this.inputValue);
            this.inputValue = "";
          },
        },
        mounted() {},
        template: `
          <div>
            <Title />
            <input v-model='inputValue' />
            <button v-on:click='add'>增加</button>
            <List v-bind:list="list" />
          </div>
        `,
      });

      app.component("Title", {
        template: `<h1>标题</h1>`,
      });

      app.component("List", {
        props: ["list"],
        template: `
        <ul>
          <li v-for='(item,i) of list'>{{i}}-{{item}}</li>
        </ul>
        `,
      });

      const vm = app.mount("#app");
      /*
      v-for
      v-model 双向绑定
      组件化 v-bind
      */
    </script>
  </body>
</html>
